<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title></title>
    <include file="public@head" />
    <link rel="stylesheet" href="__TMPL__public/assets/css/star.css"/>

</head>
<body>
<include file="public@starnav" />

<div class="center-s">
    <div class="add-comment-wrap clearfix">
        <h4>发布新动态</h4>

        <div class="comment-input-wrap">
            <span class="upload-pic">
                <form id="upload_form" action="" enctype='multipart/form-data'>
                    <input id="upload-btn" type="file" accept="image/jpg,image/jpeg,image/png" name=img >
                    <input type="hidden" name=udid>
                    <input type="hidden" name=token>
                </form>
            </span><textarea name="" id="add-comment-input" cols="30" rows="10"></textarea>
        </div>
        <div class="pic-wrap displayNone">
            <p class="tips">已上传<i>0</i>张</p>
        </div>
        <span class="fr comment-publish">发布</span>
    </div>

    <div class="sp_dynamic_wra">

    </div>
</div>



<include file="public@footer" />
<include file="public@starscripts" />

<script>
    $(function(){
        iService.headerMove(1);
//        图片预览

        var com_btn     = $(".comment-publish"),
            upload_btn  = $("#upload-btn"),
            upload_form = $('#upload_form'),
            upload_num  = $(".tips i");

        upload_form.hover(function(){
            $(this).addClass("upload-form-active");
        },function(){
            $(this).removeClass("upload-form-active");
        });
        com_btn.on("click",function(){
            var comment_content = $("#add-comment-input").val(),
                    pic_wrap = $(".pic-cut-wrap");
            if(!pic_wrap&&!comment_content){
                alert("没有要发布的内容哟！");
                return false;
            }
            var str1="",str2="";
            if(pic_wrap){
                $.each(pic_wrap,function(i){
                    str1 += $(this).data("path")+",";
                    str2 += $(this).data("file")+",";
                });
            }
            str1 = str1.slice(0,str1.length-1);
            str2 = str2.slice(0,str2.length-1);
            var dynamic_param = {
                url:'Circles/dynamic',
                data:{
                    description:comment_content,
                    path:str1,
                    file:str2
                }
            };


            $.JsonRpc(dynamic_param,function(data){
                console.log(data);
                if(data.code==200){
                    location.reload();
                    data=data.data;
                    var likeClassName = "";
                    (data.circle.booked==10)?likeClassName = "active":likeClassName = "";
                    var img_all = "";
                    if(data.circle.c_images) {
                        var img_arr = String(data.circle.c_images).split(",");
                        for(var i=0;i<img_arr.length;i++){
                            img_all += '<a href="detail.html?cid='+data.circle.cid+'"><img src="'+img_arr[i]+'" alt=""></a>';
                        }
                    }

                    var tpl =
                            '<div class="sc_list_box" id="cid'+data.circle.cid+'">'+
                            '<div class="sc_title clearfix">'+
                            '<a href="../personal/hostpage.html?u_sid='+data.circle.c_udid+'"><img class="star_img fl" src="'+data.circle.u_avatar+'" alt=""></a>'+
                            '<div class="fl">'+
                            '<h4 class="star_name">'+data.circle.u_nickname+'</h4>'+
                            '<p class="star_publish_time">'+iService.getNowFormatDate(data.circle.c_createtime)+'</p>'+
                            '</div>'+
                            '</div>'+
                            '<p class="star_publish_txt"><a href="detail.html?cid='+data.circle.cid+'">'+data.circle.c_content+'</a></p>'+
                            '<div class="imgWra clearfix">'+
                            img_all+
                            '</div>'+
                            '<ul class="sc_row_line clearfix">'+
                            '<li>'+
                            '<span class="c_like">'+data.circle.c_like+'</span>'+
                            '<i class="ic_praise '+likeClassName+'" data-cid="'+data.circle.cid+'"></i>'+
                            '</li>'+
                            '<li>'+
                            '<span>'+data.circle.c_comment+'</span>'+
                            '<i class="ic_comment"></i>'+
                            '</li>'+
                            '<li>'+
                            '<span>'+data.circle.c_share+'</span>'+
                            '<i class="ic_share"></i>'+
                            '</li>'+
                            '</ul>'+
                            '</div>';

                    $(tpl).prependTo(".sp_dynamic_wra");
                    upload_btn.attr("disabled",false);
                }
            });

        });
        function preview(file) {
            var prevDiv = document.getElementById('preview');
            if (file.files && file.files[0]) {
                var reader = new FileReader();
                reader.onload = function(evt) {
                    prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
                };
                reader.readAsDataURL(file.files[0]);
            } else {
                prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
            }
        }

        $("input[name=udid]").val(localStorage.udid);
        $("input[name=token]").val(localStorage.token);
        upload_btn.on("change",function(){
            var pic_wrap = $(".pic-wrap"),
            file_info = $("#upload-btn").val();
            if(file_info!=""){
                var file_form = new FormData(upload_form[0]);//提交表单所有数据
                $.ajax({
                    type: "post",
                    url: "{$spost}Abouts/upload",
                    data: file_form,
                    processData:false,
                    contentType:false,
                    async: true,
                    datatype: "JSON",
                    beforeSend: function(){
                    },
                    success: function (obj) {
                        var data = $.parseJSON(obj);
                        if (data.code == 200) {
                            var img_url = "{$simgs}"+data.data.path+data.data.file;
                            var tpl =
                                    '<div class="pic-cut-wrap" data-path="'+data.data.path+'"  data-file="'+data.data.file+'">'+
                                        '<img src="'+img_url+'" alt="">'+
                                        '<span class="delete_btn"></span>'+
                                    '</div>';
                            $(tpl).appendTo(pic_wrap);
                            var num = $(".pic-cut-wrap").length;
                            if(num>0){
                                $(".pic-wrap").fadeIn();
                            }
                            if(num==9){
                                upload_btn.attr("disabled","disabled");
                            }
                            upload_num.html(num+"/9");
                            $(".delete_btn").on("click",function(){
//                              delete $(this).parents(".pic-cut-wrap");
                                $(this).parents(".pic-cut-wrap").remove();
                                upload_btn.val("");
                                var num = $(".pic-cut-wrap").length;
                                upload_num.html(num+"/9");
                                if(!num>0){
                                    $(".pic-wrap").fadeOut();
                                }
                                if(num<9){
                                    upload_btn.attr("disabled",false);
                                }
                            });
                        }
                        if (data.code == 300) {
                            //清除浏览器缓存数据 跳转登录页面，
                            alert(data.data.message);
                            return false;
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(XMLHttpRequest.readyState);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
            }
        });
        //动态列表
        function get_circles(){
            layui.use('flow', function(){
                var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
                var flow = layui.flow;
                flow.load({
                    elem: '.sp_dynamic_wra' //指定列表容器
                    ,isAuto:false
                    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                        var lis = [];
                        //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                        var myCircle_param = {
                            url:'Circles/circleList',
                            data:{
                                suid: localStorage.udid,
                                page:page
                            }
                        };
                        $.JsonRpc(myCircle_param,function(data){
                            console.log(data);
                            var star_list_data = data.data.list;
                            layui.each(star_list_data, function(index, item){
                                /*var listBoxClass = "";
                                 if((index+1)%4==0){
                                 listBoxClass = "tripleBox"
                                 }*/
                                var likeClassName = "";
                                (star_list_data[index].booked==10)?likeClassName = "active":likeClassName = "";
                                var creat_time = star_list_data[index].c_createtime.slice(0,16);
                                var img_all = "";
                                if(star_list_data[index].c_images) {
                                    var img_arr = String(star_list_data[index].c_images).split(",");
                                    for(var i=0;i<img_arr.length;i++){
                                        img_all += '<a href="detail.html?cid='+star_list_data[index].cid+'"><img src="'+img_arr[i]+'" alt=""></a>';
                                    }
                                }
                                var tpl =
                                        '<div class="sc_list_box" id="cid'+star_list_data[index].cid+'">'+
                                        '<div class="sc_title clearfix">'+
                                        '<a href="../personal/hostpage.html?u_sid='+star_list_data[index].c_udid+'"><img class="star_img fl" src="'+star_list_data[index].u_avatar+'" alt=""></a>'+
                                        '<div class="fl">'+
                                        '<h4 class="star_name">'+star_list_data[index].u_nickname+'</h4>'+
                                        '<p class="star_publish_time">'+creat_time+'</p>'+
                                        '</div>'+
                                        '</div>'+
                                        '<p class="star_publish_txt"><a href="detail.html?cid='+star_list_data[index].cid+'">'+star_list_data[index].c_content+'</a></p>'+
                                        '<div class="imgWra clearfix">'+
                                        img_all+
                                        '</div>'+
                                        '<ul class="sc_row_line clearfix">'+
                                        '<li>'+
                                        '<span class="c_like">'+star_list_data[index].c_like+'</span>'+
                                        '<i class="ic_praise '+likeClassName+'" data-cid="'+star_list_data[index].cid+'"></i>'+
                                        '</li>'+
                                        '<li>'+
                                        '<span>'+star_list_data[index].c_comment+'</span>'+
                                        '<i class="ic_comment"></i>'+
                                        '</li>'+
                                        '<li>'+
                                        '<span>'+star_list_data[index].c_share+'</span>'+
                                        '<i class="ic_share"></i>'+
                                        '</li>'+
                                        '</ul>'+
                                        '</div>';
                                lis.push(tpl);
                            });
                            next(lis.join(''), page < Math.ceil(data.data.num/20));
                            //点赞帖子
                            $(".ic_praise").off("click").on("click",function(){
                                var ic_prize_now = $(this);
                                var cid = $(this).data("cid");
                                var praise_param = {
                                    url:'Circles/likeCircle',
                                    data:{
                                        cid: cid
                                    }
                                };
                                $.JsonRpc(praise_param,function(data){
                                    if(data.code==200){
                                        if(data.data.status==10){
                                            ic_prize_now.addClass('layui-anim layui-anim-scaleSpring active');
                                            ic_prize_now.siblings(".c_like").html(data.data.number);
                                        }else if(data.data.status==20){
                                            ic_prize_now.removeClass('layui-anim layui-anim-scaleSpring active');
                                            ic_prize_now.siblings(".c_like").html(data.data.number);
                                        }
                                    }
                                })
                            });
                            $(".sg_list_wra").on("mouseover mouseout",".btn_cancel",function(event){
                                if(event.type == "mouseover"){
                                    $(this).html("取消关注");
                                }else if(event.type == "mouseout"){
                                    $(this).html("已关注");
                                }
                            });
                        });
                    }
                });
            });
        }
        get_circles();
    })
</script>
</body>
</html>